<template>
  <div class="realTimeData">
    <div class="items">
      <div class="title">
        <span class="mr20 fw f18">COD</span>
        <span class="mr10">单位</span>
        <span>(mg/m³)</span>
      </div>
      <div id="chart1" class="chart1" style="width: 100%;height: 100%;"/>
    </div>
    <div class="items">
      <div class="title">
        <span class="mr20 fw f18">氨氮</span>
        <span class="mr10">单位</span>
        <span>(mg/m³)</span>
      </div>
      <div id="chart2" class="chart2" style="width: 100%;height: 100%;"/>
    </div>
    <div class="items">
      <div class="title">
        <span class="mr20 fw f18">PH</span>
        <span class="mr10">单位</span>
        <span>(mg/m³)</span>
      </div>
      <div id="chart3" class="chart3" style="width: 100%;height: 100%;"/>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/utils/mixins/resize'

export default {
  name: 'RealTimeData',
  mixins: [resize],
  data() {
    return {
      todayData: {
        xAxisData: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
        todayData: [90, 82, 112, 34, 50, 120, 110, 25, 45, 112, 65, 22, 220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
      },
      myChart1: null,
      myChart2: null,
      myChart3: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  methods: {
    drawLine() {
      this.myChart1 = echarts.init(document.getElementById('chart1'))
      this.myChart2 = echarts.init(document.getElementById('chart2'))
      this.myChart3 = echarts.init(document.getElementById('chart3'))
      let option1 = {
        // backgroundColor: '#394056',
        // title: {
        //   top: 10,
        //   text: 'COD',
        //   textStyle: {
        //     fontWeight: 'bold',
        //     fontSize: 18,
        //     color: '#000'
        //   },
        //   left: '1%'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        grid: {
          top: '25%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          data: this.todayData.xAxisData
        }],
        yAxis: [{
          type: 'value',
          // name: '(%)',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#C0C0C0',
              type: 'dashed'
            }
          }
        }],
        series: [{
          // name: '今日',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(142,173,220,0.6)'
              }, {
                offset: 0.8,
                color: 'rgba(142, 173, 220, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#8eaddb',
              borderColor: 'rgba(142, 173, 220,0.27)',
              borderWidth: 12

            }
          },
          markLine: {
            symbol: ['none', 'none'],
            lineStyle: {
              // type: 'dash',
              color: '#FC011A ',
              width: 1
            },
            data: [
              {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 100
              }, {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 200
              }]
            // silent: true
          },
          data: this.todayData.todayData
        }]
      }
      let option2 = {
        // backgroundColor: '#394056',
        title: {
          top: 20,
          // text: 'Requests',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#F1F1F3'
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        grid: {
          top: '25%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          data: this.todayData.xAxisData
        }],
        yAxis: [{
          type: 'value',
          // name: '(%)',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#C0C0C0',
              type: 'dashed'
            }
          }
        }],
        series: [{
          // name: '今日',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(142,173,220,0.6)'
              }, {
                offset: 0.8,
                color: 'rgba(142, 173, 220, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#8eaddb',
              borderColor: 'rgba(142, 173, 220,0.27)',
              borderWidth: 12

            }
          },
          markLine: {
            symbol: ['none', 'none'],
            lineStyle: {
              // type: 'dash',
              color: '#FC011A ',
              width: 1
            },
            data: [
              {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 100
              }, {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 200
              }]
            // silent: true
          },
          data: this.todayData.todayData
        }]
      }
      let option3 = {
        // backgroundColor: '#394056',
        title: {
          top: 20,
          // text: 'Requests',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#F1F1F3'
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        grid: {
          top: '25%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          data: this.todayData.xAxisData
        }],
        yAxis: [{
          type: 'value',
          // name: '(%)',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#C0C0C0',
              type: 'dashed'
            }
          }
        }],
        series: [{
          // name: '今日',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(142,173,220,0.6)'
              }, {
                offset: 0.8,
                color: 'rgba(142, 173, 220, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#8eaddb',
              borderColor: 'rgba(142, 173, 220,0.27)',
              borderWidth: 12

            }
          },
          markLine: {
            symbol: ['none', 'none'],
            lineStyle: {
              // type: 'dash',
              color: '#FC011A ',
              width: 1
            },
            data: [
              {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 100
              }, {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 200
              }]
            // silent: true
          },
          data: this.todayData.todayData
        }]
      }
      this.myChart1.setOption(option1)
      this.myChart2.setOption(option2)
      this.myChart3.setOption(option3)
      echarts.connect([this.myChart1, this.myChart2, this.myChart3])
    }

  }
}
</script>

<style lang="scss" scoped>
.realTimeData {
  .items {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: #FFFFFF;
    position: relative;
    .title {
      position: absolute;
      top: 10px;
      left: 30px;
    }
  }
}
</style>
